<!-- components/RankList.vue -->
<template>
  <view class="rank-list">
    <view class="rank-item" v-for="(item, i) in list" :key="i">
      <text class="rank" :class="i < 3 ? 'top' : ''">{{ i + 1 }}</text>
      <text class="name">{{ item.name }}</text>
      <text class="score">{{ item.score }}分</text>
    </view>
  </view>
</template>

<script setup>
defineProps(['list'])
</script>

<style scoped>
.rank-list {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
}

.rank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.rank-item:last-child {
  border-bottom: none;
}

.rank {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  border-radius: 50%;
  background: #eee;
  color: #999;
  font-size: 24rpx;
}

.rank.top:nth-child(1) { background: #ffd700; color: #000; }
.rank.top:nth-child(2) { background: #c0c0c0; color: #000; }
.rank.top:nth-child(3) { background: #cd7f32; color: #000; }

.name {
  flex: 1;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.score {
  font-size: 28rpx;
  color: #007aff;
  font-weight: 500;
}
</style>